<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/milligram.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/fonts.style.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css" />
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
</head>
<body>
<div class="login-page animation-bg-color-blue">
    <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
            <div class="row">
                <!-- 登录标题 -->
                <div class="col-md-6">
                    <div class="info d-flex align-items-center">
                        <div class="content special-title">
                            <h1>欢迎登录</h1>
                            <p>城市预约挂号平台</p>
                        </div>
                    </div>
                </div>
                <!-- 表格信息 -->
                <div class="col-md-6 bg-white">
                    <div class="form d-flex align-items-center">
                        <div class="content">
                            <form>
                                <div class="form-group">
                                    <input id="phone" class="input-material" name="phone" type="text" placeholder="账号" />
                                    <span id="phone-error" class="is-invalid invalid-feedback"></span>
                                </div>
                                <div class="form-group">
                                    <input id="password" class="input-material" name="password" type="password" placeholder="密码" />
                                    <span id="password-error" class="is-invalid invalid-feedback"></span>
                                </div>
                                <input id="login-btn" class="btn" type="button" value="登录" />
                                <!--<input class="input-btn" type="button" onclick="javascrtpt:window.location.href='user/register'" value="注册" />-->
                                <div class="jump-tip">
                                    <small>没有账号？</small>
                                    <a class="hyperlink" value="注册">注册</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        /**
         * 定义校验开关
         */
        var flagPhone = false;
        var flagPassword = false;
        /**
         * 校验手机号码
         */
        $("#phone").blur(function () {
            function checkPhone() {
                //获取用户输入数据
                var phone = $("#phone").val();
                //正则
                var re = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (phone == '') {
                    flagPhone = false;
                    $("#phone-error").show().html("电话号码不能为空！");
                } else if (re.test(phone) == false) {
                    flagPhone = false;
                    $("#phone-error").show().html("你的手机号码是地球的吗？！");
                } else {
                    flagPhone = true;
                    $("#phone-error").hide();
                }
            }
            checkPhone();
        });
        /**
         * 校验密码
         */
        $("#password").blur(function () {
            function checkPassword() {
                //获取用户输入数据
                var password = $("#password").val();
                //正则
                var re = /^\w{6,12}$/;
                if (password == '') {
                    flagPassword = false;
                    $("#password-error").show().html("密码不能为空！");
                } else if (re.test(password) == false) {
                    flagPassword = false;
                    $("#password-error").show().html("密码是6-12位数字、字母和下划线！");
                } else {
                    flagPassword = true;
                    $("#password-error").hide();
                }
            }
            checkPassword();
        });
        /**
         * 登录按钮
         */
        $("#login-btn").click(function () {
            if ((flagPhone  && flagPassword) == true) {
                $.post("/user/userLogin",{phone:$("#phone").val(),password:$("#password").val()},
                    function (data) {
                        if (data == "success") {
                            document.location.assign("/user/index");
                        }else if (data == "error") {
                            alert("用户名或密码错误")
                        }else {
                            alert("账号不存在啊，混蛋！")
                        }
                    })
            } else {
                alert("输入信息不正确！");
            }
        });
        /**
         * 注册跳转
         */
        $(".hyperlink").click(function () {
            document.location.assign("/user/register");
        });
    })
</script>
</html>